<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌手管理</el-breadcrumb-item>
      <el-breadcrumb-item>歌手列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom: 20px" icon="el-icon-plus" @click="addSinger">添加歌手</el-button>
      <el-alert show-icon v-if="isHasSingerTypeId" :title="'这是歌手类型为 '+currentSingerType+' 的歌手~~~'" type="success" close-text="我知道了" style="margin-bottom: 5px"></el-alert>
      <el-alert show-icon v-else title="这是全部歌手~~~" type="success" style="margin-bottom: 5px" close-text="我知道了"></el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="歌手名称" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.singer_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="歌手图片" width="140">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="'http://localhost:3001/'+scope.row.singer_pic_url" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="歌手性别" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.singer_sex }}</span>
          </template>
        </el-table-column>
        <el-table-column label="歌手介绍" width="330" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.singer_introduction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="歌手分类" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.singertype_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.row.singerid)"></el-button>
            <el-button size="mini" icon="el-icon-setting" type="primary" @click="handleMusic(scope.row.singerid)">音乐管理</el-button>
            <el-button size="mini" icon="el-icon-setting" type="primary" @click="handleMV(scope.row.singerid)">MV管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- mv管理的表格 -->
    <el-dialog title="MV管理" :visible.sync="dialogTableVisibleMV">
      <el-button type="primary" style="margin-bottom: 20px" @click="$router.push('/mvlist')">添加MV</el-button>
      <el-table :data="gridDataMV">
        <el-table-column property="mv_name" label="MV名称" width="450"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDeleteMV(scope.row.mvid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 歌曲管理的表格 -->
    <el-dialog title="音乐管理" :visible.sync="dialogTableVisibleMusic">
      <el-button type="primary" style="margin-bottom: 20px" @click="$router.push('/musiclist')">添加音乐</el-button>
      <el-table :data="gridDataMusic">
        <el-table-column property="music_name" label="音乐名称" width="450"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDeleteMusic(scope.row.musicid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 修改歌手的表单 -->
    <!-- id name sex picfile introduction singerTypeId -->
    <el-dialog title="编辑歌手" :visible.sync="dialogFormVisibleEditSinger">
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-form-item label="歌手名称" label-width='100px' prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="歌手类型" label-width='100px' prop="singertypeId">
          <el-select v-if="SingerTypeOpitions.length!==0" filterable v-model="form.singerTypeId" placeholder="请选择">
            <el-option v-for="item in SingerTypeOpitions" :key="item.singertypeid" :label="item.singertype_name" :value="item.singertypeid">
            </el-option>
          </el-select>
          <span v-else style="text-decoration:underline;color:#409eff;cursor:pointer;" v-on:click="$router.push('/singertypelist')">请先添加歌手类型！</span>
        </el-form-item>
        <el-form-item label="歌手性别" label-width='100px' prop="sex">
          <el-select filterable v-model="form.sex" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="歌手介绍" label-width='100px' prop="introduction">
          <el-input type="textarea" v-model="form.introduction" placeholder="请输入歌手介绍！"></el-input>
        </el-form-item>
        <el-form-item label="歌手图片" label-width='100px'>
          <el-upload class="avatar-uploader" :auto-upload="false" action="#" accept="image/*" :multiple="false" :on-change="handleImageChange" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
    <!-- 添加歌手的表单 -->
    <!-- name sex picfile introduction singerTypeId -->
    <el-dialog title="添加歌手" :visible.sync="dialogFormVisibleAddSinger">
      <el-form :model="addForm" ref="ruleForm" :rules="addRules">
        <el-form-item label="歌手名称" label-width='100px' prop="name">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="歌手类型" label-width='100px' prop="singertypeId">
          <el-select v-if="SingerTypeOpitions.length!==0" filterable v-model="addForm.singerTypeId" placeholder="请选择">
            <el-option v-for="item in SingerTypeOpitions" :key="item.singertypeid" :label="item.singertype_name" :value="item.singertypeid">
            </el-option>
          </el-select>
          <span v-else style="text-decoration:underline;color:#409eff;cursor:pointer;" v-on:click="$router.push('/singertypelist')">请先添加歌手类型！</span>
        </el-form-item>
        <el-form-item label="歌手性别" label-width='100px' prop="sex">
          <el-select filterable v-model="addForm.sex" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="歌手介绍" label-width='100px' prop="introduction">
          <el-input type="textarea" v-model="addForm.introduction" placeholder="请输入歌手介绍！"></el-input>
        </el-form-item>
        <el-form-item label="歌手图片" label-width='100px' prop="picfile">
          <el-upload class="avatar-uploader" :auto-upload="false" action="#" accept="image/*" :multiple="false" :on-change="handleImageChangeAddSinger" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSinger,
  getSingerBySingerTypeId,
  getSingerTypeById,
  getMvBySingerId,
  deleteSinger,
  deleteMV,
  getMusicBySingerId,
  deleteMusic,
  getSingerType,
  editSinger,
  addSinger
} from '../../utils/api'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      // 当前的歌手类型id 如果为'',表示为查看全部歌手 如果不为''则是查看对应的歌手类型的歌单 作为方法的参数
      currentSingerTypeId: '',
      // 当前歌手类型的名称
      currentSingerType: '',
      // 是否是从歌手类型页携带歌手类型id跳转
      isHasSingerTypeId: false,
      // 控制mv管理的表格的显示
      dialogTableVisibleMV: false,
      // mv管理的表格的数据
      gridDataMV: [],
      // 控制歌曲管理的表格的显示
      dialogTableVisibleMusic: false,
      // 歌曲管理的表格的数据
      gridDataMusic: [],
      // 控制修改歌手的表单的显示
      dialogFormVisibleEditSinger: false,
      // 控制添加歌手的表单的显示
      dialogFormVisibleAddSinger: false,
      // 修改歌手的表单
      // id name sex picfile introduction singerTypeId
      form: {
        id: 0,
        name: '',
        sex: '',
        picfile: null,
        introduction: '',
        singerTypeId: ''
      },
      // 添加歌手的表单
      // name sex picfile introduction singerTypeId
      addForm: {
        name: '',
        sex: '',
        picfile: null,
        introduction: '',
        singerTypeId: ''
      },
      imageUrl: '',
      // 修改歌手的表单的校验
      rules: {
        name: [
          { required: true, message: '请输入歌手名称', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择歌手性别', trigger: 'change' },
        ],
        singerTypeId: [
          { required: true, message: '请选择歌手类型', trigger: 'change' }
        ],
        introduction: [
          { required: true, message: '请输入歌手介绍', trigger: 'blur' }
        ]
      },
      // 添加歌手的表单的校验
      addRules: {
        name: [
          { required: true, message: '请输入歌手名称', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择歌手性别', trigger: 'change' },
        ],
        singerTypeId: [
          { required: true, message: '请选择歌手类型', trigger: 'change' }
        ],
        introduction: [
          { required: true, message: '请输入歌手介绍', trigger: 'blur' }
        ],
        picfile: [
          { required: true, message: '请选择歌手图片', trigger: 'change' }
        ]
      },
      SingerTypeOpitions: []
    }
  },
  created () {
    // 如果是从歌手类型跳转过来
    if (this.$route.query.singertypeid) {
      this.currentSingerTypeId = Number(this.$route.query.singertypeid);
      this.isHasSingerTypeId = !this.isHasSingerTypeId;
      // 作为方法的参数传递进行发起请求
      this.getSingerLBySingerType(this.currentSingerTypeId);
    } else {
      // 不是从歌手类型跳转过来 获取全部歌手
      this.getSingerL();
    }
  },
  methods: {
    // 添加歌手
    submitForm1 (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisibleAddSinger = false;
          // // name sex picfile introduction singerTypeId
          var formData = new FormData();
          formData.append('name', this.addForm.name);
          formData.append('sex', this.addForm.sex);
          formData.append('introduction', this.addForm.introduction);
          formData.append('singerTypeId', this.addForm.singerTypeId);
          formData.append('picfile', this.addForm.picfile);
          let res = await addSinger(formData);
          if (res.status == 0) {
            this.$message({
              message: '添加歌手成功！',
              type: 'success'
            });
            if (this.isHasSingerTypeId) {
              this.getSingerLBySingerType(this.currentSingerTypeId);
            } else {
              this.getSingerL();
            }
            this.addForm.name = '';
            this.addForm.sex = '';
            this.addForm.introduction = '';
            this.addForm.singerTypeId = '';
            this.addForm.picfile = null;
            this.imageUrl = '';
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    // 准备添加歌手上传文件的数据
    handleImageChangeAddSinger (file, filelist) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addForm.picfile = filelist[filelist.length - 1].raw;
    },
    // 准备编辑歌手上传文件的数据
    handleImageChange (file, filelist) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.picfile = filelist[filelist.length - 1].raw;
    },
    // 获取singertype 为添加歌手和编辑歌手做准备
    async getSingerTypeL () {
      let res = await getSingerType();
      this.SingerTypeOpitions = res.data;
    },
    // 编辑歌手 准备数据
    handleEdit (scope) {
      this.form.id = scope.singerid;
      this.form.name = scope.singer_name;
      this.form.sex = scope.singer_sex;
      this.form.singerTypeId = scope.singertype_id;
      this.form.introduction = scope.singer_introduction;
      this.getSingerTypeL();
      this.dialogFormVisibleEditSinger = true;
    },
    // 歌曲管理
    async handleMusic (id) {
      let res = await getMusicBySingerId(id);
      if (res.status == 0) {
        this.gridDataMusic = res.data;
      }
      this.dialogTableVisibleMusic = true;
    },
    // mv管理
    async handleMV (id) {
      let res = await getMvBySingerId(id);
      if (res.status == 0) {
        this.gridDataMV = res.data;
      }
      this.dialogTableVisibleMV = true;
    },
    // 删除歌手
    handleDelete (id) {
      this.$confirm('此操作将永久删除该歌手, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteSinger(id);
        if (res.status == 0) {
          this.$message({
            message: '删除歌手成功！',
            type: 'success'
          });
          if (this.isHasSingerTypeId) {
            this.getSingerLBySingerType(this.currentSingerTypeId);
          } else {
            this.getSingerL();
          }
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 添加歌手
    addSinger () {
      this.getSingerTypeL();
      this.dialogFormVisibleAddSinger = true;
    },
    // 编辑歌手
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisibleEditSinger = false;
          // // id name sex picfile introduction singerTypeId
          var formData = new FormData();
          formData.append('id', this.form.id);
          formData.append('name', this.form.name);
          formData.append('sex', this.form.sex);
          formData.append('introduction', this.form.introduction);
          formData.append('singerTypeId', this.form.singerTypeId);
          formData.append('picfile', this.form.picfile);
          let res = await editSinger(formData);
          if (res.status == 0) {
            this.$message({
              message: '修改歌手信息成功！',
              type: 'success'
            });
            if (this.isHasSingerTypeId) {
              this.getSingerLBySingerType(this.currentSingerTypeId);
            } else {
              this.getSingerL();
            }
            this.form.name = '';
            this.form.sex = '';
            this.form.singerTypeId = '';
            this.form.introduction = '';
            this.form.id = 0;
            this.form.picfile = null;
            this.imageUrl = '';
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    // 删除mv
    handleDeleteMV (id) {
      this.$confirm('此操作将永久删除该MV, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteMV(id);
        if (res.status == 0) {
          this.$message({
            message: '删除MV成功，请稍后查看！',
            type: 'success'
          });
          if (this.isHasSingerTypeId) {
            this.getSingerLBySingerType(this.currentSingerTypeId);
          } else {
            this.getSingerL();
          }
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除歌曲
    handleDeleteMusic (id) {
      this.$confirm('此操作将永久删除该歌曲, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteMusic(id);
        if (res.status == 0) {
          this.$message({
            message: '删除歌曲成功，请稍后查看！',
            type: 'success'
          });
          if (this.isHasSingerTypeId) {
            this.getSingerLBySingerType(this.currentSingerTypeId);
          } else {
            this.getSingerL();
          }
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 获取相对应的歌手
    async getSingerLBySingerType (id) {
      let res = await getSingerBySingerTypeId(id);
      if (res.status == 0) {
        this.tableData = res.data;
        // 获取当前的歌手类型进行显示
        // 通过getSingerBySingerTypeId获取有数据 
        if (res.data.length !== 0) {
          this.currentSingerType = res.data[0].singertype_name;
        } else {
          // 通过getSingerBySingerTypeId获取的数据为0 因为该歌手类型中没有歌手 所以没包含singertype名 可以在前面的页面传递singertype名也可以重新根singertypeid重新发起请求 这里使用后者
          let res1 = await getSingerTypeById(id);
          this.currentSingerType = res1.data[0].singertype_name;
        }
      } else {
        this.$message.error(res.message);
      }
    },
    // 获取全部歌手
    async getSingerL () {
      let res = await getSinger();
      if (res.status == 0) {
        this.tableData = res.data;
      } else {
        this.$message.error(res.message);
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>